<template>
  <div id="app">
      <router-view v-if="$route.name === 'login'"></router-view>
     <div v-else>
       <header class="header">
            <nav class="menu">
                <ul>
                    <li><router-link to="/">学生综合服务管理系统</router-link></li>
                    <li><router-link to="/index">教材管理系统</router-link></li>
                    <li><router-link to="/index2">在校生报到系统</router-link></li>
                    <li><router-link to="/login">登录</router-link></li>
                </ul>
            </nav>
        </header>

      <el-container style="height: 600px; border: 1px solid #eee">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <component :is="currentMenu"></component>
          </el-aside>

        <el-container>

          <el-main>

            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
     </div>
  </div>
</template>


<style>
app{
    padding: 20px;
    background-color: #f9f9f9;
}
a {
    color: #333333;
    text-decoration: none;
}
.header {
    background-color: #ffffff;
    color: #fff;
    border-bottom: 1px solid #ddd;
    padding: 1px 20px;
    font-size: 16px;
    text-align: center;
    border-radius: 8px 8px 0 0;
}
.menu ul {
    list-style: none;
    display: flex;
    gap: 40px;
}

.menu ul li {
    padding: 10px;
    text-decoration: none;
}
.menu ul li a:hover {
    background-color: #f9f9f9;
    color: #409eff;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
import MyMenu from '@/components/myMenu.vue'
import MyMenu2 from "@/components/myMenu2.vue";
export default {
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            tableData: Array(20).fill(item)
        }
    },
    components: {
        MyMenu,
        MyMenu2
    },
    watch: {
        '$route.meta.menu': {
            immediate: true,
            handler(newMenu) {
                // 当路由变化时更新 currentMenu
                this.currentMenu = newMenu === 'myMenu2' ? MyMenu2 : MyMenu;
            }
        }
    }
};
</script>
